@charset "UTF-8";
@import "_variable";
@import (reference) "_position";
//银行卡背景色
.fn-bank-card();
//去掉边框
.fn-border-none();
//生成字体大小
.font-size(40);
//Tab选项卡
.tab-bar {
  position: relative;
  width: 100%;
  .tab-nav {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid @bd;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      flex: 1;
      color: #92A4be;
      font-size: @fs-14;
      padding: 0 15px;
      &.active {
        color: @main;
      }
    }
    .tab-line {
      position: absolute;
      bottom: -1px;
      left: 20px;
      z-index: 999;
      width: 100px;
      background: @btn;
      height: 2px;
    }
  }
  .tab-content {
    position: relative;
    width: 100%;
    overflow: hidden;
    .pane-item {
      position: relative;
      width: 100%;
      display: none;
      &.active {
        display: block;
      }
    }
  }
}

//better-scroll
.better-scroll-box {
  @heaader: 46px;
  @footer: 51px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 666;
  background: #fff;
  overflow: hidden;
  .bscroll-container {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &.header {
      padding-top: @heaader;
    }
    &.footer {
      padding-bottom: @footer;
    }
    .bscroll-header {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: @white;
      width: 100%;
      height: @heaader;
      .tab-bar {
        height: 100%;
      }
    }
  }
}

//felx列表布局
.box-list-flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0 -7px;
  .item {
    flex: 1;
    padding: 0 7px;
    .content {
      border: 1px solid @bd;
      border-radius: 5px;
    }
  }
}

//带箭头的列表
.box-list-arrow {
  position: relative;
  display: block;
  width: 100%;
  >ul {
    display: block;
    width: 100%;
    li {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid @bd;
      height: 50px;
      &:last-child {
        border-bottom: 0 none;
      }
      >a {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        align-items: center;
      }
      label {
        display: flex;
        width: 25px;
        align-items: center;
        line-height: 20px;
        i.sprite {
          position: relative;
          top: -1px;
        }
        &.t {
          width: 65px;
        }
      }
      span {
        color: @main;
        font-size: @fs-14;
        flex: 1;
        display: flex;
        line-height: 20px;
      }
      em {
        display: flex;
        width: 20px;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}

//带有箭头和文字的列表
.box-list-arrow-content {
  position: relative;
  display: block;
  width: 100%;
  >ul {
    display: block;
    width: 100%;
    li {
      display: block;
      width: 100%;
      border-bottom: 1px solid @bd;
      &:first-child {
        >.content {
          span {
            top: 10px;
          }
        }
      }
      >.content {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0 12px 0;
        >span {
          position: relative;
          display: block;
          color: @main;
          font-size: @fs-14;
          width: 80px;
        }
        >label,
        .avatar-uploader {
          display: flex;
          flex: 1;
          justify-content: flex-end;
        }
        >em {
          display: flex;
          width: 15px;
          align-items: center;
          justify-content: flex-end;
        }
        .el-button {
          width: 100%;
          text-align: right;
          padding: 0;
          color: @g-333;
        }
      }
    }
  }
}

//带有标题的列表
.box-list-title {
  display: flex;
  width: 100%;
  flex-direction: column;
  .title {
    font-size: @fs-18;
    color: #285AA1;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    height: 20px;
    &::before {
      content: "";
      width: 4px;
      height: 100%;
      margin-right: 8px;
      display: block;
      background: @btn;
    }
  }
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    .item {
      border: 1px solid @bd;
      border-radius: 5px;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      &.sale-out {
        .content {
          filter: grayscale(100%) opacity(0.4);
        }
      }
    }
  }
}

//没有数据
.data-list-none {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 50px;
}

//用户按钮
.user-btn {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: @btn;
  border: 1px solid @btn;
  color: @white;
  font-size: @fs-17;
  &.disable {
    filter: grayscale(100%) opacity(0.4);
  }
  &.line {
    background: @white;
    border: 1px solid @main;
    color: @main;
  }
  &:hover,
  &:focus {
    color: @white;
    background: @btn;
    border: 1px solid @btn;
  }
}

//页面底部固定按钮
.footer-btn-box {
  @h: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  z-index: 1000;
  height: @h;
  .user-btn {
    height: @h;
    border-radius: 0;
  }
}

//进度条
.progress-box {
  position: relative;
  display: block;
  width: 100%;
  .line {
    position: relative;
    display: block;
    width: 100%;
    background: #D8D8D8;
    height: 4px;
    border-radius: 4px;
    >span {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: @btn;
      height: 100%;
      border-radius: 4px;
    }
  }
  .text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
    color: @g-666;
    font-size: @fs-10;
    span {
      display: block;
    }
  }
}

//横向时间轴
.day-line-box {
  @line-bd: #979797;
  @line-bg: #d8d8d8;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  label {
    &.text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 70px;
      font-size: @fs-13;
      color: @g-666;
    }
    &.day-line {
      position: relative;
      top: 7px;
      flex: 1;
      height: 1px;
      background: @line-bd;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &::before,
      &::after {
        border: 1px solid @line-bd;
        background: @line-bg;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        content: "";
      }
    }
  }
}

/**************************************************************************************************************************************/

/*样式函数
/*页面生成样式函数
/**************************************************************************************************************************************/

//设置阴影
.fn-box-shadow(@shadow) {
  box-shadow: @shadow;
}

//设置过滤
.fn-set-transition(@cont) {
  transition: @cont;
}

//设置转换
.fn-set-transform(@cont) {
  transform: @cont;
}

//设置转换中心
.fn-set-transform-origin(@cont) {
  transform-origin: @cont;
}

//设置动画
.fn-set-animation(@cont) {
  animation: @cont;
}

//设置三角函数
.fn-arrow-dir(@width: 8px, @color) {
  .d-in-block;
  width: 0;
  height: 0;
  border: @width solid;
  border-color: @color;
}

//设置文字渐变
.fn-text-gradient(@s: #03d6ff, @e: #038aff) {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(@s), to(@e));
}

//去掉边框
.fn-border-none(@border: @border-string) {
  .fn-border-type(@i: 1) when (@i<length(@border)) {
    @string: e(extract(@border-string, @i));
    .bd-no-@{string} {
      border-@{string}: 0 none !important;
    }
    .fn-border-type(@i+1);
  }
  .fn-border-type(@i: 1) when (@i=length(@border)) {
    @string: e(extract(@border-string, @i));
    .bd-no-@{string} {
      border: 0 none !important;
    }
  }
  .fn-border-type;
}

//银行卡颜色
.fn-bank-card(@name: @bank-name) {
  .fn-bank-card-color(@i: 1) when (@i<=length(@name)) {
    @n: e(extract(@bank-name, @i));
    @bg: e(extract(@bank-color, @i));
    .card-@{n} {
      background: @bg  !important;
    }
    .fn-bank-card-color(@i+1);
  }
  .fn-bank-card-color;
}

//设置角度
.border-radius(@radius: 5px) {
  border-radius: @radius;
}

//设置透明度
.fn-set-opacity-n(@num) {
  opacity: @num;
}

//设置透明背景
.fn-set-opacity(@r, @g, @b, @a) {
  background: @c;
}

//设置背景图大小
.fn-set-background-size(@size) {
  background-size: @size;
}

//设置字体大小
.font-size(@n, @i: 8) when (@i =< @n) {
  .fs-@{i} {
    font-size: unit(@i, px) !important;
  }
  .font-size(@n, (@i+1));
}

//设置z-index
.fn-set-index-list(@n: 100, @i: 11) when (@i =< @n) {
  .z-index-@{i} {
    z-index: @i  !important;
  }
  .fn-set-index-list(@n, (@i+1));
}

.fn-set-index-list();
//字体样式
.ft-family(@font-family: @font-family-Helvetica) {
  font-family: @font-family;
}

.ft-style(@type: normal) {
  font-style: @type;
}

.ft-weight(@weight: normal) {
  font-weight: @weight;
}

.ft-decoration(@type: none) {
  text-decoration: @type;
}

.ft-wrap() {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ft-ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.ft-clamp(@line: 2) {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line
}

.fs-number(@size: 12, @unit: px) {
  font-size: unit(@size, @unit) !important;
}

.text-color(@color: @g-333) {
  color: @color;
}

.text-mid-line(@height) {
  height: @height;
  line-height: @height;
}

.text-mid-line-bor(@h, @b: 2) {
  height: @h;
  line-height: @h - @b;
}

/*左侧进入*/

.animated-left {
  .fn-set-transform(translate3d(100%, 0, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*右侧进入*/

.animated-right {
  .fn-set-transform(translate3d(-100%, 0, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*上方进入*/

.animated-top {
  .fn-set-transform(translate3d(0, -100%, 0));
  .fn-set-transition(transform 0.5s 0s);
}

/*下方进入*/

.animated-bottom {
  .fn-set-transform(translate3d(0, 100%, 0));
  .fn-set-transition(transform 0.5s 0s);
  &-enter {
    transform: translate3d(0, 100%, 0);
    transition: all 0.3s ease;
    &.active {
      transform: translate3d(0, 0, 0);
    }
  }
}

.animated-left.active,
.animated-right.active,
.animated-top.active,
.animated-bottom.active {
  .fn-set-transform(translate3d(0, 0, 0));
}